<template>
  <div id="app">
    <nav>
      <ul>
        <router-link id="one" :to="props.link1"><li :class="btn1" @click="toInventory()">药品总库存</li></router-link>
        <router-link id="one" :to="props.link2"><li :class="btn2" @click="toBatch()">批次库存及价格</li></router-link>
      </ul>
    </nav>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import router from "../../router";

type Props={
  link1:string,
  link2:string
}
const props = defineProps<Props>()
console.log(props.link1);

let btn1=ref("btnOne")
let btn2=ref("btnTwo")

const toInventory = () => {
  btn1.value="btnOne"
  btn2.value="btnTwo"
  
};
const toBatch = () => {
  btn1.value="btnTwo"
  btn2.value="btnOne"
  
};
</script>
<style scoped>
ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 45;
  list-style: none;
  text-align: center;
}
ul li {
  width: 227px;
  height: 44px;
  line-height: 44px;
  background-color: #e5e5e5;
  color: #676a6d;
  /* text-decoration: none; */
}
.btnOne{
  background-color: #00aaff;
  color: white;
}
.btnTwo{
  background-color: #e5e5e5;
  color: #676a6d;
}
#one{
  text-decoration: none;
}
</style>
